<!-- 商品列表页面 -->
<template>
  <view
    v-if="shenheStatus == 0"
    class="list-content"
    :style="[boxStyle]"
    :class="listShowWay ? 'bg-grey' : ''"
  >
    <!-- 搜索式导航 -->
    <searchNav :searchValue="searchVal" @gotoSearch="gotoSearch"></searchNav>
    <!-- tab内容 -->
    <view class="list-header">
      <view class="condition-nav">
        <view class="tabs-section">
          <view
            class="tabs-item"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="selectBar(tab, index)"
          >
            <view class="tab-word">
              <view class="tab-text">
                <text>{{ tab.text }}</text>
                <view class="sequence" v-if="tab.haveSequence">
                  <i
                    class="iconfont icon-arrow-up top-icon"
                    :class="
                      res_data.sort_type == 1 && index == topbar - 1
                        ? 'color-red'
                        : ''
                    "
                  ></i>
                  <i
                    class="iconfont icon-arrow-down down-icon"
                    :class="
                      res_data.sort_type == 0 && index == topbar - 1
                        ? 'color-red'
                        : ''
                    "
                  ></i>
                </view>
              </view>
              <view class="active-tab">
                <view v-if="index == topbar - 1" class="active-icon"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="layout-box" @click="changeLayout">
        <i
          class="iconfont"
          :class="!listShowWay ? 'icon-viewlist' : 'icon-all'"
        ></i>
      </view>
    </view>
    <!-- tab内容 -->

    <!-- 商品列表 -->
    <view class="list-body" :class="listShowWay ? 'add-padding' : ''">
      <view v-if="listtwo.length > 0">
        <view v-for="(good, index) in listtwo" :key="index">
          <horizontalList
            v-if="!listShowWay"
            :key="index"
            :good="good"
          ></horizontalList>
        </view>
        <u-waterfall v-show="listShowWay" v-model="listtwo" ref="uWaterfall">
          <template v-slot:left="{ leftList }">
            <template v-for="(good, index) in leftList">
              <verticalList :key="index" :good="good"></verticalList>
            </template>
          </template>
          <template v-slot:right="{ rightList }">
            <template v-for="(good, index) in rightList">
              <verticalList :key="index" :good="good"></verticalList>
            </template>
          </template>
        </u-waterfall>
      </view>
      <view v-if="listtwo.length == 0" class="no-good">
        <u-empty :text="$t('common.noGoods')" mode="search"></u-empty
      ></view>
      <view
        class="data-complete"
        v-if="listtwo.length > 0 && currentpage * 12 >= total_count"
        >没有更多了 ~</view
      >
    </view>
    <!-- 商品列表 -->

    <footNav :controlList="controlList"></footNav>
  </view>
  <Shenhe v-else-if="shenheStatus == 1" :isShowTitle="true"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import searchNav from "../components/searchNav.vue";
import horizontalList from "../components/horizontalList.vue"; // 横版商品
import verticalList from "../components/verticalList.vue"; // 竖版商品
import footNav from "@/components/diyNew/footNav/index.vue";

export default {
  components: {
    Shenhe,
    searchNav,
    horizontalList,
    verticalList,
    footNav
  },
  data() {
    return {
      searchVal: "", // 搜素内容
      tabs: [
        {
          text: this.$t("list.comprehensive"),
          haveSequence: false,
          sequenceTop: 1,
          sequenceDown: 0,
          options: [this.$t("list.recommended"), this.$t("list.commits")],
          sort: 0
        },
        {
          text: this.$t("list.latest"),
          haveSequence: false,
          sequenceTop: 0,
          sequenceDown: 0,
          sort: 1
        },
        {
          text: this.$t("list.price"),
          haveSequence: true,
          sequenceTop: 1,
          sequenceDown: 1,
          sequence: 0, // 默认升序 (1|true):升序 (0|false)：降序
          sort: 2,
          sort_type: -1
        },
        {
          text: this.$t("goods.count"),
          haveSequence: false,
          sequenceTop: 0,
          sequenceDown: 0,
          sequence: 1, // 默认降序 1:升序 0：降序
          sort: 3
        }
      ],
      cat_id: "",
      topbar: 1, //绑定tab的每一项
      sorter: 1, //绑定价格的排序方式
      show: false, //选择品牌时的弹出层
      brand: this.$t("list.brand"), //选择的品牌名称
      selectindex: -1, //选择品牌时控制样式
      datalist: [
        {
          id: 1,
          name: "测试"
        },
        {
          id: 2,
          name: "哈哈"
        }
      ],
      loadStatus: "loadmore", //上拉加载更多显示
      listtwo: [], //商品列表内容数据
      currentpage: 1,
      no_data: false,
      res_data: {
        mch_id: "",
        sorts: 0,
        sort_type: -1,
        brand_id: "",
        goods_id: ""
      },
      useFoot: true,
      currentBar: null,
      total_count: 0,
      listShowWay: 1, // 列表展示方式： 0-横版,  1-竖版
      flowList: [], //商品列表处理后的数据
      controlList: []
    };
  },
  onLoad(options) {
    if (options) {
      this.cat_id = options.cat_id || "";
      this.res_data.brand_id = options.brand_id || "";
      this.getGoodList();
    }

    // #ifndef MP-ALIPAY
    uni.setNavigationBarTitle({
      title: this.$t("title.list")
    });
    // #endif
    this.getBandlist();

    this.getDiySystemPages();
  },
  onShow() {
    setTimeout(() => {
      try {
        this.useFoot = this.$utils.useFoot(this.controls);
      } catch (e) {}
    }, 500);
  },
  onReachBottom() {
    if (this.currentpage * 12 >= this.total_count) return;
    this.currentpage++;
    this.getGoodList("loadMore");
  },
  methods: {
    // 查询搜索列表
    gotoSearch(e) {
      this.searchVal = e.val;
      this.getSearchList();
    },
    // 请求前数据处理
    getSearchList() {
      let params = {
        keyword: this.searchVal,
        page: this.currentpage,
        sort: this.res_data.sorts
      };
      if (this.currentBar) {
        if (
          this.currentBar.text === this.$t("list.price") &&
          this.currentBar.sort_type != undefined
        ) {
          params["sort_type"] = this.res_data.sort_type;
        }
      }

      this.searchRequest(params);
    },
    // 调用接口请求搜索数据
    searchRequest(params) {
      uni.showLoading({
        title: this.$t("list.search"),
        mask: true
      });

      this.$allrequest.classification.goodsList(params).then((res) => {
        if (!res.code && res.data) {
          uni.hideLoading();
          if (params.loadMore) {
            this.listtwo = [...this.listtwo, ...res.data.list];
          } else {
            this.listtwo = res.data.list;
          }
          this.addRandomData();
          this.total_count = res.data.row_count;
        }
      });
    },
    //进入商品详情页
    goGoodsDetails(id) {
      uni.navigateTo({
        url: "/goods/goods/goods?id=" + id
      });
    },
    //获取商品列表
    getGoodList(type) {
      var params = {
        cat_id: this.cat_id ? this.cat_id : 0,
        page: this.currentpage,
        mch_id: this.res_data.mch_id,
        sort: this.res_data.sorts,
        sort_type: this.res_data.sort_type,
        brand_id: this.res_data.brand_id,
        goods_id: this.res_data.goods_id
      };
      this.$allrequest.classification.goodsList(params).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length == 0) {
            this.no_data = true;
            return;
          }
          this.total_count = res.data.row_count;
          if (type == "loadMore") {
            this.listtwo = [...this.listtwo, ...res.data.list];
          } else {
            this.listtwo = res.data.list;
          }
          this.addRandomData();
        }
      });
    },
    //获取商品分类
    getBandlist() {
      var params = {};
      this.$allrequest.classification.getBrandList(params).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data.list;
        }
      });
    },
    //点击切换tab标题
    selectBar(item, index) {
      this.currentBar = item;
      this.topbar = index + 1;
      if (item.text === this.$t("list.price")) {
        this.res_data.sort_type = this.res_data.sort_type == 1 ? 0 : 1;
      }
      this.res_data.sorts = item.sort;
      if (this.listtwo.length != 0) {
        this.$refs.uWaterfall.clear();
      }
      this.listtwo = [];
      this.currentpage = 1;
      this.no_data = false;
      this.getGoodList();
    },
    // 切换布局方式
    changeLayout() {
      this.listShowWay = !this.listShowWay;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    addRandomData() {
      for (let i = 0; i < this.listtwo.length; i++) {
        let index = this.$u.random(0, this.listtwo.length - 1);
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(this.listtwo[index]));
        item.idx = this.$u.guid();
        this.flowList.push(item);
      }
    },
    // 获取diy系统页面配置数据
    getDiySystemPages() {
      this.$allrequest.diyNew.getDiySystemPages().then((res) => {
        uni.stopPullDownRefresh();
        if (!res.code) {
          let list = res.data.list;
          let data = {};
          if (!list.length) return;
          list.forEach((d) => {
            d.template = JSON.parse(d.template);
            if (d.template.system_type == "classify") {
              data = d;
            }
          });
          if (!data?.id) return;
          this.page = data.template;
          this.templates = data.template.templates;
          res.data.controls = JSON.parse(res.data.controls);
          this.controlList = res.data.controls;
          let [footNav] = this.controlList.filter((d) => {
            return d.show_type == "nav";
          });
          if (footNav && footNav.is_show) {
            this.useNav = true;
          }
        }
      });
    }
  },
  computed: {
    boxStyle() {
      return {
        paddBottom: this.useFoot
          ? "calc(env(safe-area-inset-bottom) + 100rpx)"
          : "0px"
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.list-content {
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 120rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

  .list-header {
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    z-index: 201;
    background-color: #ffffff;

    .condition-nav {
      width: 628rpx;
      height: 80rpx;

      .tabs-section {
        width: 628rpx;
        height: 100%;
        overflow-x: scroll;
        display: flex;
        padding-top: 23rpx;

        .tabs-item {
          width: 25%;
          flex-shrink: 0;

          .tab-word {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-weight: 500;
            color: #262626;
            line-height: 1;

            .active-tab {
              width: 26rpx;
              height: 18rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              .active-icon {
                width: 24rpx;
                height: 4rpx;
                background: #f0250e;
              }
            }

            .tab-text {
              display: flex;
              align-items: center;

              .sequence {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-left: 5rpx;
                position: relative;
                height: 29rpx;
                .iconfont {
                  font-size: 26rpx;
                  position: absolute;
                  left: 0;
                  color: #000000;
                }
                .top-icon {
                  top: -6rpx;
                }
                .down-icon {
                  bottom: -6rpx;
                }
                .color-red {
                  color: #f0250e;
                }
              }
            }
          }
        }
      }
    }

    .layout-box {
      width: 100%;
      flex: 1;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        color: #262626;
        font-size: 44rpx;
        font-weight: 500;
        padding-bottom: 10rpx;
      }
    }
  }

  .list-body {
    width: 100%;
    padding-top: 80rpx;

    .data-complete {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #c1c1c1;
      padding: 40rpx 0;
      clear: both;
    }

    .no-good {
      font-size: 32rpx;
      color: #999;
      text-align: center;
      margin-top: 200rpx;
    }
  }

  .add-padding {
    padding: 96rpx 2.13vw 4.73vw;
  }

  .demo-warter {
    margin: 5px;
    background-color: #ffffff;
    position: relative;

    .demo-title {
      padding: 0 16rpx;
      margin-bottom: 15rpx;
      margin-top: 10px;
      // height: 74rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 26rpx;
      color: $u-main-color;
      background-color: #ffffff;
    }

    .price-row {
      padding: 0rpx 16rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;

      .price-row-left {
        display: flex;

        view {
          font-size: 28rpx;
          color: #ff334b;
        }
      }

      .price-row-right {
        font-size: 22rpx;
        color: #999;
      }
    }
  }
}

.bg-grey {
  background-color: #f2f2f2;
}

.demo-warter {
  margin: 5px;
  background-color: #ffffff;
  position: relative;

  .demo-title {
    padding: 0 16rpx;
    margin-bottom: 15rpx;
    margin-top: 10px;
    // height: 74rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 26rpx;
    color: $u-main-color;
    background-color: #ffffff;
  }

  .price-row {
    padding: 0rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;

    .price-row-left {
      display: flex;

      view {
        font-size: 28rpx;
        color: #ff334b;
      }
    }

    .price-row-right {
      font-size: 22rpx;
      color: #999;
    }
  }
}
</style>
